<template>
  <view class="page">
    <view class="box">
      <view class="number">订单号：{{ orderCode }}</view>
      <view class="icons">
        <image class="i" src="~@/static/shop/paySuccess.png" />
        <text>支付成功</text>
      </view>
      <view class="line">
        <view class="l" />
      </view>
      <view class="row">
        <text>车牌号码</text>
        <text>{{ number }}</text>
      </view>
      <view class="row">
        <text>会员类型</text>
        <text>{{ type }}</text>
      </view>
      <view class="total">
        <text>实付款</text>
        <text class="red">￥{{ price }}</text>
      </view>
    </view>
    <view class="pay">
      <text>支付方式</text>
      <view v-if="payType === 'wx_pay'" class="pay__right">
        <image class="pay__icon" src="~@/static/order/weixinPay.png" />
        <text>微信支付</text>
      </view>
      <view v-if="payType === 'zfb_pay'" class="pay__right">
        <image class="pay__icon" src="~@/static/order/zfbPay.png" />
        <text>支付宝支付</text>
      </view>
    </view>
    <view @tap="index" class="global-btn">首页</view>
  </view>
</template>

<script>
import Goods from '@/components/Goods/Goods.vue';
import { getPayInfoAPI } from '@/api/vip';

export default {
  components: { Goods },
  data() {
    return {
      orderCode: '-',
      number: '-',
      type: '-',
      price: '0.00',
      payType: 'wx_pay',
      id: undefined
    }
  },
  onLoad(options) {
    console.log(options)
    this.id = options.id;
    this.getPayInfo();
  },
  methods: {
    /** @name 获取支付信息 **/
    getPayInfo() {
      getPayInfoAPI({ id: this.id }).then(res => {
        console.log(res)
        this.orderCode = res.orderCode;
        this.number = res.number;
        this.type = res.name;
        this.price = res.price;
        this.payType = res.payType;
      })
    },
    /** @name 返回首页 **/
    index() {
      uni.switchTab({
        url: '/pages/my/my'
      });
    }
  }
}
</script>

<style lang="scss">
.page {
  box-sizing: border-box;
  padding: 24rpx 24rpx 200rpx 24rpx;
}
.box {
  background-color: #fff;
  border-radius: 14rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
  .number {
    width: 74%;
    margin: 0 auto 36rpx auto;
    height: 72rpx;
    font-size: 24rpx;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2rpx solid #EEEEEE;
  }
  .icons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 44rpx;
    .i {
      width: 144rpx;
      height: 144rpx;
      margin-bottom: 22rpx;
    }
  }
  .items {
    box-sizing: border-box;
    padding: 10rpx 20rpx 0 20rpx;
  }
  .line {
    width: 100%;
    height: 24rpx;
    display: flex;
    align-items: center;
    position: relative;
    margin: 20rpx 0;
    .l {
      flex: 1;
      border-top: 4rpx dashed #D1D1D1;
      margin-top: 2rpx;
    }
    &::before{
      content: '';
      display: block;
      width: 24rpx;
      height: 24rpx;
      background-color: #F4F5F8;
      position: absolute;
      border-radius: 50%;
      top: 0;
      left: -12rpx;
    }
    &::after{
      content: '';
      display: block;
      width: 24rpx;
      height: 24rpx;
      background-color: #F4F5F8;
      border-radius: 50%;
      position: absolute;
      top: 0;
      right: -12rpx;
    }
  }
  .row {
    box-sizing: border-box;
    padding: 0 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #999;
    margin-top: 12rpx;
    &:last-child {
      margin-bottom: 20rpx;
    }
  }
  .total {
    margin-top: 24rpx;
    box-sizing: border-box;
    padding: 20rpx 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2rpx solid #E4E4E4;
    color: #333;
    font-size: 24rpx;
    .red {
      color: #EB1C1C;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}
.pay {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
  border-radius: 14rpx;
  color: #999;
  font-size: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 24rpx;
}
.pay__right {
  display: flex;
  align-items: center;
  color: #444;
  font-size: 26rpx;
}
.pay__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 6rpx;
}
.global-btn {
  background-color: #fff;
  color: #333;
}
</style>
